<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">


<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{file.manage.title}">fileAll</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-3;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-31-28; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-40)/5;
            $("#file-table-flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/file/getFileListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var vl = '<a href="#" style="color:blue;" class="btn-sm" onclick="preInfo(\''+ _row.fileUuid +'\',\''+ v+ '\')">' + v +'</a>';
                            return vl;
                        }},
                    {display : /*[[#{file.parent.uuid}]]*/"",name : 'parentUuid',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{file.type}]]*/"",name : 'fileType',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                        var dom = $("#file-type-id option[value='" + v + "']");
                        return dom.text();
                    }},
                    {display : /*[[#{file.capacity}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var htmlContents = '<span style="color:blue;cursor:pointer;" onclick="share(\'' + v + '\');"><i class="glyphicon glyphicon-share"></i></span>';
                            htmlContents += '<a href="' + /*[[${#request.getContextPath()}]]*/'';
                            htmlContents += '/file/download/' + v +'" style="color:blue;" target="_blank"><i class="glyphicon glyphicon-save"></i></a>';
                            htmlContents += '<span style="color:blue;cursor:pointer;" onclick="move(\'' + v + '\');"><i class="glyphicon glyphicon-share-alt"></i></span>';
                            return htmlContents;
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            $("#file-table-flexigrid-id").flexReload();

            $("#refresh-obs-file-id").click(function (event) {
                event.stopPropagation();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{refreshObsFile}]]*/'',
                    data: [],
                    success: function (data) {
                        message(data.msg);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/);
                    }
                });
            });

            $("#query-btn-id").click(function (evnet) {
                evnet.stopPropagation();
               var searchFileName =  $("#search-file-name-id").val();
                $("#file-table-flexigrid-id").flexOptions({
                    extParam:[{name:"searchFileName",value:searchFileName}]
                }).flexReload();
            });
            $("#file-upload-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.upload}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag  = $("#file-upload-form-id input").verification();
                            if(!flag){
                                return;
                            }

                            $("#file-upload-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#upload-btn-id").click(function (event) {
                event.stopPropagation();
                $("#file-upload-form-id").resetForm();
                $("#file-upload-dialog-id").dialog('open');
            })

            $("#file-upload-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    $("#file-table-flexigrid-id").flexReload();
                    $("#file-upload-dialog-id").dialog("close")
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');

                },
                complete: function (response, status) {

                }
            });

            // 移动
            $("#file-move-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.move.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                           var fileUuid= $("#file-move-dialog-id").attr("fileUuid");
                           var dirUuid = null;
                            var ztreeObj = $.fn.zTree.getZTreeObj("file-remove-ztree-id");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                //menuIds.push(item.id);
                                dirUuid = item.id;
                            });
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/file/moveFile}]]*/'',
                                data: [
                                    {name:"fileUuid",value:fileUuid},
                                    {
                                    name:"dirUuid",value:dirUuid
                                }],
                                success: function (data) {
                                    message(data.msg);
                                    $("#file-table-flexigrid-id").flexReload();
                                    $("#file-move-dialog-id").dialog("close");
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/);
                                }
                            });
                        }

                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#file-rename-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.rename.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                        $("#file-rename-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#file-rename-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    $("#file-table-flexigrid-id").flexReload();
                    $("#file-rename-dialog-id").dialog("close")
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');

                },
                complete: function (response, status) {

                }
            });
            $("#copy-btn-id").click(function (event) {
                copyFile();
            });
            $("#copy-file-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.copy.tip}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var fileUuid =  $("#file-table-flexigrid-id").getFlexigridiAttrByIndex(0);
                            var dirUuid = null;
                            var ztreeObj = $.fn.zTree.getZTreeObj("copy-file-ztree-id");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                //menuIds.push(item.id);
                                dirUuid = item.id;
                            });
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/file/moveFile}]]*/'',
                                data: [
                                    {name:"fileUuid",value:fileUuid},
                                    {
                                        name:"dirUuid",value:dirUuid
                                    }],
                                success: function (data) {
                                    message(data.msg);
                                    $("#file-table-flexigrid-id").flexReload();
                                    $("#copy-file-dialog-id").dialog("close");
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/);
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            // 删除到回收站
            $("#delete-btn-id").click(function (event) {
                var ids = $("#file-table-flexigrid-id").getFlexigridiAttrByIndex(0);
                if (ids.length !== 1) {
                    message(/*[[#{common.select.one}]]*/);
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType: 'json',
                    data: [{
                        name: "fileUuid",
                        value: ids
                    }],
                    url:/*[[@{/file/delfile}]]*/'',
                    success: function (data) {
                        message(data.msg);
                    },
                    error: function (msg) {
                        message();
                    }
                })
            });

            $("#pre-video-dialog-id").dialog({
                autoOpen : false,
                width : _gridWidth,
                height:_gridHeight,
                modal : true,
                resizable : false,
                title: /*[[#{file.video}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }]
            });
        });//ready
        function preInfo(fileUuid,fileName) {
            console.info(fileUuid + "   " + fileName)
            //图片的判断
            var authImg = /((.jpg)|(.png)|(.ico)|(.docx))$/.exec(fileName);
            var authVideo = /((.mp3)|(.mp4))$/.exec(fileName);
            if (authImg) {
                var src =/*[[${#request.getContextPath()}]]*/'';
                src += "/file/download/" + fileUuid;
                $("#pre-img-dom-id").attr("src", src);
                $("#pre-img-dialog-id").dialog('open');
            } else if (authVideo) {

                $.ajax({
                    type: 'post',
                    url:/*[[@{getShareUrl}]]*/'src',
                    dataType: 'json',
                    cache: false,
                    data: [{name: "fileUuid", value: fileUuid}],
                    success: function (data) {
                        $("#pre-video-console-id").attr("src", data.msg);
                        // $("#pre-video-console-id").attr("src","https://javatest10.obs.cn-north-4.myhuaweicloud.com:443/zhumu_1.mp4?AccessKeyId=HZBNCUNE63MH4CBLAAY6&Expires=1635328381&Signature=V9II6jWIYXhzu2RkMd%2FARKc%2BWQ4%3D");

                        $("#pre-video-dialog-id").dialog('open');
                    },
                    error: function () {
                        message("<spring:message code='common.error'/>");
                    },
                });
            }
        }
        function rowDbclick(r) {
            $(r).dblclick(function (event) {
                var colVue = $(r).attr("ch").split('_FG$SP_');
                console.info(colVue);
                $("#re-file-uuid-id").val(colVue[0]);
                $("#re-file-name-id").val(colVue[4])
                // $("#re-user-uuid-id").text(colVue[0]);

                 $("#file-rename-dialog-id").dialog('open');
            });
        }

        function move(fileUuid) {
            console.log(fileUuid)
            // console.log('1')
            // var colVue = $(r).attr("ch").split('_FG$SP_');
            // console.info(colVue);
            //$("#mv-file-uuid-id").val(event);
            // $("#mv-file-name-id").val(event);
            // $("#re-file-uuid-id").val(colVue[0]);
            // $("#re-file-name-id").val(colVue[4])
            // // $("#re-user-uuid-id").text(colVue[0]);

            //$("#file-move-dialog-id").dialog('open');
            $("#file-move-dialog-id").attr("fileUuid",fileUuid);
            loadFileDirTree();
        }
        var allocateSetting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        function  loadFileDirTree() {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/file/queryDirZtreeListByFileId}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#file-remove-ztree-id"), allocateSetting, data);
                    $("#file-move-dialog-id").dialog('open');
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/);
                }
            });
        }

        function copyFile() {
            var ids = $("#file-table-flexigrid-id").getFlexigridiAttrByIndex(0);
            if (ids.length !== 1) {
                message(/*[[#{common.select.one}]]*/);
                return;
            }
            ;
            $.ajax({
                type: 'post',
                async: false,
                dataType: 'json',
                url: /*[[@{/file/queryDirZtreeListByFileId}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#copy-file-ztree-id"), allocateSetting, data);
                    $("#copy-file-dialog-id").dialog('open');
                },
                error: function (msg) {
                    message(/*[[#{common.error}]]*/);
                }
            });

        }

    </script>
</head>
<body>
<nav>
    <span th:text="#{file.manage.title}"></span>
    <input sec:authorize="hasRole('ROLE_cldk_file_query')" id="search-file-name-id" type="text" th:placeholder="#{file.name}">
    <a sec:authorize="hasRole('ROLE_cldk_file_query')" id="query-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-search"></i>
    </a>
    <a  sec:authorize="hasRole('ROLE_cldk_file_refresh')" id="refresh-obs-file-id" href="#" class="btn-link">
        <i class="glyphicon glyphicon-refresh"></i>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_file_upload')" id="upload-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-open"></i>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_file_upload')" id="copy-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-duplicate"></i>
    </a>
    <a sec:authorize="hasRole('ROLE_cldk_file_upload')" id="delete-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-trash"></i>
    </a>
    <select id="file-type-id" gdmt:dicselect="file.type" style="display: none"></select>
</nav>
<table id="file-table-flexigrid-id"></table>

<div id="file-upload-dialog-id" style="display: none">
    <form th:action="@{upload}" id="file-upload-form-id" method="post" enctype="multipart/form-data">
        <input type="file" name="fileName" reg="^.{1,100}$">
    </form>
</div>
<div id="file-rename-dialog-id" style="display: none">
    <form id="file-rename-form-id" th:action="@{/file/renameFile}" method="post">
        <input type="hidden" id="re-file-uuid-id" name="fileUuid">
        <div class="form-group">
            <span th:text="#{file.name}"></span>
            <input class="form-control" id="re-file-name-id" name="fileName"></input>
        </div>
    </form>
</div>
<div id="file-move-dialog-id" style="display: none">
    <form id="file-move-form-id" th:action="@{/file/moveFile}" method="post">
        <input type="hidden" id="mv-file-uuid-id" name="fileUuid">
        <input type="hidden" id="mv-dir-uuid-id" name="dirUuid">
<!--        <div class="form-group">-->
<!--            <span th:text="#{file.location.to.move}"></span>-->
<!--            <input class="form-control" id="mv-file-name-id" name="fileName"></input>-->
<!--        </div>-->
    </form>
    <ul id="file-remove-ztree-id" class="ztree">

    </ul>
</div>
<div id="copy-file-dialog-id" style="display: none">
    <ul id="copy-file-ztree-id" class="ztree">

    </ul>
</div>
<div id="pre-video-dialog-id" style="display: none;">
    <video id="pre-video-console-id" width="320" height="240" controls="controls" src="">

    </video>
</div>
</body>
</html>
